import React, {Component} from 'react';
import IceContainer from '@icedesign/container';
import CustomBreadcrumb from '../../components/CustomBreadcrumb';
import TabReqParam from './components/TabReqParam';
import IceLabel from '@icedesign/label';
import ReactJson from 'react-json-view';
import { Tag,Icon,Button,Feedback } from '@icedesign/base';
import {CopyToClipboard} from 'react-copy-to-clipboard';
import FoundationSymbol from 'foundation-symbol';
import PostMan from './components/PostMan'
import IceTitle from '@icedesign/title';
import JsonUtil from '../../tools/JsonUtils';
import axios from 'axios';
import './Api.scss';

const Toast = Feedback.toast;

export default class Api extends Component {
    constructor(props) {
        super(props);
        this.state = {
            param:{
                actionName:"",
                method:"",
            },
            dataSource:{
                url:"",
                title:"",
                desc:"",
                author:"",
                respText:"{}", //响应内容
                requestType:[], //请求方式
            },
            copied: false
        };
    }

    componentDidUpdate(){
        var param = this.props.route.query
        //页面跳转参数变动
        if (this.state.param.actionName != param.actionName ||
                    this.state.param.method != param.method) {
            this.setState({param: param});
            axios
                .post('/api/getMethodTitle',JsonUtil.mapToParam(
                    new Map().set("actionName", param.actionName).set("method", param.method)
                ))
                .then((response) => {
                    this.setState({
                        dataSource: response.data,
                    });
                })
                .catch((error) => {
                    Toast.error(error.msg == undefined?"系统错误":error.msg);
                });
        }
    }

    componentWillMount() {
        var param = this.props.route.query
        this.setState({param: param});
        axios
            .post('/api/getMethodTitle',JsonUtil.mapToParam(
                new Map().set("actionName", param.actionName).set("method", param.method)
            ))
            .then((response) => {
                this.setState({
                    dataSource: response.data,
                });
            })
            .catch((error) => {
                Toast.error(error.msg == undefined?"系统错误":error.msg);
            });
    }

    //使用方法
    render() {
        const breadcrumb = [
            { text: this.state.dataSource.actionTitle, link: '' },
            { text: this.state.dataSource.title, link: '' },
        ];
        return (
            <div>
                <CustomBreadcrumb dataSource={breadcrumb} />
                <IceContainer style={{paddingTop:0}}>
                    <IceTitle text={this.state.dataSource.title} style={{marginTop:20,marginBottom:10}} />
                    <div style={{float:'right',marginTop:-30}}>
                        <Tag shape="readonly" type="normal" size="small" >
                            <Icon type="personal-center" size='xs' /> {this.state.dataSource.author}</Tag>
                    </div>
                    <div style={{marginLeft:16,fontSize:14}}>{this.state.dataSource.desc}</div>
                    <h3>接口地址:
                        <IceLabel inverse={false} style={{fontSize:13,marginLeft:10}} status="primary">{this.state.dataSource.url}</IceLabel>
                        <CopyToClipboard text={this.state.dataSource.url} >
                            <Button type="primary" style={{marginLeft:6}} onClick={()=>Toast.success("复制成功！")} shape="text">
                                <FoundationSymbol type="copy" size="small" />
                            </Button>
                        </CopyToClipboard>
                    </h3>
                    <h3>请求类型: {
                        this.state.dataSource.requestType.map((item,i)=>(
                            <IceLabel inverse={false} status="success" style={{marginLeft:6}} key={i}>{item}</IceLabel>
                        ))
                    }</h3>
                    <h2 style={{padding:0}}>入参</h2>
                    <TabReqParam action={this.state.param.actionName} method={this.state.param.method} paramType={"1"}/>
                    <h2 style={{padding:0}}>出参</h2>
                    <TabReqParam action={this.state.param.actionName} method={this.state.param.method} paramType={"2"} />
                    <h2 >返回事例:</h2>
                    <ReactJson src={JSON.parse(this.state.dataSource.respText)} theme="monokai" style={{borderRadius:5,padding:6}} />
                </IceContainer>
                <PostMan action={this.state.param.actionName} method={this.state.param.method} />
            </div>
        )
        const method = this.state.param.method;
    }
}